<template>
  <div class="comment-list">
    <!-- 一级评论 -->
    <div v-for="comment in comments" :key="comment.id" :id="`comment-${comment.id}`" class="comment" :class="{ 'highlighted': highlightedCommentId === comment.id }">
      <div class="comment-header">
        <div class="comment-user">
          <img :src="comment.avatar || '/default-avatar.png'" class="avatar" />
          <span class="username">{{ comment.username }}</span>
        </div>
        <div class="comment-time">{{ formatTime(comment.createTime) }}</div>
      </div>
      
      <div class="comment-content">
        {{ comment.content }}
      </div>
      
      <div class="comment-actions">
        <a @click="$emit('reply', comment)">回复</a>
      </div>
      
      <!-- 评论回复 -->
      <div class="comment-replies" v-if="comment.children && comment.children.length > 0">
        <div 
          v-for="reply in comment.children" 
          :key="reply.id" 
          :id="`comment-${reply.id}`"
          class="comment-reply" 
          :class="{ 'highlighted': highlightedCommentId === reply.id }"
        >
          <div class="comment-header">
            <div class="comment-user">
              <img :src="reply.avatar || '/default-avatar.png'" class="avatar" />
              <span class="username">{{ reply.username }}</span>
              <span class="reply-to" v-if="reply.replyToUsername">
                回复 <span class="reply-username">{{ reply.replyToUsername }}</span>
              </span>
            </div>
            <div class="comment-time">{{ formatTime(reply.createTime) }}</div>
          </div>
          
          <div class="comment-content">
            {{ reply.content }}
          </div>
          
          <div class="comment-actions">
            <a @click="$emit('reply', reply, comment.id)">回复</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  comments: {
    type: Array,
    default: () => []
  },
  highlightedCommentId: {
    type: Number,
    default: null
  }
});

const emit = defineEmits(['reply']);

// 格式化时间
const formatTime = (timeStr) => {
  if (!timeStr) return '';
  
  const date = new Date(timeStr);
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  });
};
</script>

<style scoped>
.comment-list {
  margin-top: 20px;
}

.comment {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 5px;
  border-left: 3px solid transparent;
}

.comment.highlighted {
  border-left: 3px solid #1890ff;
  background-color: rgba(24, 144, 255, 0.05);
}

.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.comment-user {
  display: flex;
  align-items: center;
}

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
}

.username {
  font-weight: bold;
  color: #333;
}

.comment-time {
  color: #999;
  font-size: 0.9em;
}

.comment-content {
  margin-bottom: 10px;
  line-height: 1.6;
}

.comment-actions {
  display: flex;
  gap: 15px;
}

.comment-actions a {
  color: #1890ff;
  cursor: pointer;
}

.comment-actions a:hover {
  color: #40a9ff;
}

.comment-replies {
  margin-top: 15px;
  margin-left: 20px;
}

.comment-reply {
  margin-bottom: 15px;
  padding: 12px;
  background-color: #f5f5f5;
  border-radius: 5px;
  border-left: 3px solid transparent;
}

.comment-reply.highlighted {
  border-left: 3px solid #1890ff;
  background-color: rgba(24, 144, 255, 0.05);
}

.reply-to {
  margin-left: 5px;
  color: #666;
}

.reply-username {
  color: #1890ff;
}
</style> 